<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>成长报告</title>
    <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../js/jquery.mobile-1.4.5.min.js"></script>
    <script src="../../js/jquery.jqChartori.min.js"></script>
    <style>
        .ui-header h1.ui-title{
            display:inline-block;
            margin-left: 0.2em;
            border-left: 1px solid #eee;
            text-indent: 0.6em;
            
        }
        .ui-page-theme-a .ui-bar-inherit{
            background : transparent;
            border:none;
        }
        .logo{
            width: 3em;
        }
        .logo_right{
            position: absolute;
            right: 0;
            top:0;
        }
        .app_logo{
            width: 6em;
            padding-right: 0;
        }
        .report_title{
            position: absolute;
            right:0em;
            top:2.8em;
            font-size: 0.2em;
        }
        .modify{
            position: absolute;
            left:13em;
            top:1em;
        }
        .ui-footer{
            background: transparent;
            border: none;
            text-align: right;
        }
        .time_recorder,
        .Avatar{
            position:absolute;
            left:0;
            width:25em;
            margin: 0;
        }
    </style>
</head>

<body>

    
    <!-- Start of first page: #one -->
    <div data-role="page" id="one" class="ui-page-theme-a" data-next="two" tabindex="0">

        <div data-role="header">
            <img src="../../images/logo.png" alt="" width="50" class="logo">
            <h1>萌萌的佩奇</h1>
            <a href="#popup" class="ui-btn ui-shadow ui-corner-all modify" data-rel="dialog" data-transition="pop">更改</a>
            <div class="logo_right">
                <img src="../../images/app_logo.png" alt="" class="app_logo">
            </div>
            <div class="report_title">9/30-10/15 观看报告</div>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <h2>因为有你，更加精彩！</h2>
            <h3>最后一页有彩蛋/寻找和你最像的TA</h3>
        </div><!-- /content -->



        <div data-role="footer" data-theme="a">
            <a href="#two" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-arrow-r" data-transition="slideup">继续查看</a>
        </div>
        <!-- /footer -->
    </div><!-- /page one -->

    <!-- Start of second page: #two -->
    <div data-role="page" id="two" data-theme="a" data-next="three">

        <div data-role="header">
            <img src="../../images/logo.png" alt="" width="50" class="logo">
            <h1>萌萌的佩奇</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <h2>表现的不错哦</h2>
            <p>在这段时间里，宝宝平均每天观看节目25分钟</p>
            <h2>要爱护视力哦</h2>
            <p>X月X日，观看超过60分钟啦</p>

        </div><!-- /content -->

        <div data-role="footer" data-theme="a">
            <a href="#three" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-arrow-r" data-transition="slideup">继续查看</a>
        </div>
        <!-- /footer -->
    </div><!-- /page two -->

     <!-- Start of second page: #three -->
     <div data-role="page" id="three" data-theme="a" data-next="four">

        <div data-role="header">
            <img src="../../images/logo.png" alt="" width="50" class="logo">
            <h1>萌萌的佩奇</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <h2>宝宝共观看了15次</h2>
            <p>本月播放次数最高的动画，和别的小朋友有更多的话题了呢</p>
            <h2>宝宝共观看了10次</h2>
            <p>关于友情、责任、冒险为主题的动画片，宝宝是不是更阳光了？</p>
            <h2>宝宝共观看了3次</h2>
            <p>这个动漫满冷门，宝宝的爱好很独特哦！</p>
            <div class="time_recorder">

            </div>  
        </div><!-- /content -->

        <div data-role="footer" data-theme="a">
            <a href="#four" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-arrow-r" data-transition="slideup">继续查看</a>
        </div>
        <!-- /footer -->
    </div><!-- /page three -->

     <!-- Start of second page: #four -->
     <div data-role="page" id="four" data-theme="a" data-next="five">

        <div data-role="header">
            <img src="../../images/logo.png" alt="" width="50" class="logo">
            <h1>萌萌的佩奇</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <h2>宝宝的化身是？爱笑的猫头鹰</h2>
            <p>描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
            <h2>六大能力</h2>
            <div class="Avatar">
            </div>
        </div><!-- /content -->
        

        <div data-role="footer" data-theme="a">
            <a href="#five" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-arrow-r" data-transition="slideup">继续查看</a>
        </div>
        <!-- /footer -->
    </div><!-- /page four -->

    <!-- Start of second page: #five -->
    <div data-role="page" id="five" data-theme="a" data-next="one">


        <div role="main" class="ui-content">
            <h2>周末推荐</h2>
        </div><!-- /content -->

        <div data-role="footer" data-theme="a">
            <a href="#one" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-arrow-r" data-transition="slideup">回到初始位置</a>
        </div>
        <!-- /footer -->
    </div><!-- /page five -->

    <!-- Start of third page: #popup -->
    <div data-role="page" id="popup">

        <div data-role="header" data-theme="b">
            <h2>信息修改</h2>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <!-- <h2>信息修改</h2> -->
            <form action="">
                <label class="" for="text-basic">
                    昵称
                </label>
                <input type="text" name="text-basic" id="text-basic" value="萌萌的佩奇">
                <label for="date">生日：</label>
                <input type="date" name="date" id="date" value="">
                <label class="ui-radio" for="">
                    <input type="radio" name="radio-choice-0" id="radio-choice-0a">男
                </label>
                <label class="ui-radio" for="">
                    <input type="radio" name="radio-choice-0" id="radio-choice-0b">女
                </label>
            </form>
            <p>填写信息后我们就可以给宝宝推更合适的节目了哦！</p>
            <!-- <p><a href="#one" data-rel="back"
                    class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">Back to page
                    "one"</a></p> -->
        </div>
        
        <!-- /content -->
       
        <!-- <div data-role="footer">
            <h4>Page Footer</h4>
        </div> -->
        
        <!-- /footer -->
    </div><!-- /page popup -->

</body>
<script lang="javascript" type="text/javascript">
    $(document).ready(function () {
        //宝宝化身图表
        var $Chart =  $(".Avatar");
        var background = {
            type: 'linearGradient',
            x0: 0,
            y0: 0,
            x1: 0,
            y1: 1,
            colorStops: [{ offset: 0, color: '#d2e6c9' },
                            { offset: 1, color: 'white' }]
        };

        $Chart.jqChart({
            title: { text: '爱笑的猫头鹰' },
            border: { strokeStyle: 'transparent' },
            //background: background,
            shadows: {
                enabled: true
            },
            animation: { duration: 1 },
            axes: [
                {
                    type: 'categoryAngle',
                    categories: ['逻辑力', '沟通力', '决策力', '数学力', '记忆力', '操作力']
                },
                {
                    type: 'linearRadius',
                    renderStyle: 'polygon',
                    majorTickMarks: { visible: true }
                }
            ],
            series: [
                {
                    title: '萌萌的佩奇',
                    type: 'radarLine',
                    data: [35.62, 36.54, 30.45, 20, 40, 30]
                },
                {
                    title: '青宝',
                    type: 'radarLine',
                    data: [26.45, 3.78, 26.45, 10.76, 3.79, 15.67]
                }
            ]
        });
        //宝宝观看时长图表
        $('.time_recorder').jqChart({
            title: { text: '平均时长' },
            border: { strokeStyle: 'transparent' },
            tooltips: { type: 'shared' },
            animation: { duration: 1 },
            axes: [
                {
                    location: 'bottom',
                    type: 'dateTime',
                    labels: {
                        stringFormat: 'yyyy/m/d'
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    title: '萌萌的佩奇',
                    strokeStyle: '#418CF0',
                    lineWidth: 2,
                    data: [[new Date(2010, 0, 1), 62], [new Date(2010, 0, 2), 60],
                            [new Date(2010, 0, 3), 68], [new Date(2010, 0, 4), 58],
                            [new Date(2010, 0, 5), 52], [new Date(2010, 0, 6), 60],
                            [new Date(2010, 0, 7), 48]]
                },
                {
                    type: 'line',
                    title: '青宝',
                    strokeStyle: '#FCB441',
                    lineWidth: 2,
                    data: [[new Date(2010, 0, 1), 46], [new Date(2010, 0, 2), 40],
                            [new Date(2010, 0, 3), 62], [new Date(2010, 0, 4), 65],
                            [new Date(2010, 0, 5), 60], [new Date(2010, 0, 6), 36],
                            [new Date(2010, 0, 7), 70]]
                }
            ]
        });
    });
</script>
</html>